<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>用户列表</title>

    <!-- Bootstrap -->
    <link rel="stylesheet" href="${pageContext.request.contextPath}/static/css/bootstrap.min.css">

</head>
<body>

<div class="container">


    <h1>用户列表</h1>
    <div>
        <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#addUser">新增用户</button>
    </div>

    <div>
        <form id="queryForm" action="/user/findUserByConditionWithPage" method="get">
            查询用户：
            <input type="hidden" name="pageNum" value="${requestScope.pageUsers.getPageNum()}">
            <input type="hidden" name="pageSize" value="${requestScope.pageUsers.getPageSize()}">
            <input type="text" name="condition" placeholder="请输入用户名或手机号" value="${requestScope.condition}">
            <button class="btn btn-info" type="submit" id="queryBtn">查询</button>
            <a class="btn btn-info" href="/user/findAllWithPage?pageNum=${requestScope.pageUsers.getPageNum()}&pageSize=${requestScope.pageUsers.getPageSize()}" role="button">显示全部用户</a>
        </form>
    </div>

    <c:if test="${empty requestScope.pageUsers.getList()}">
        <h1>暂无用户数据</h1>
    </c:if>

    <c:if test="${not empty requestScope.pageUsers.getList()}">
        <%-- 用户展示列表 --%>
        <table class="table table-bordered table-striped table-hover">
            <thead>
            <tr>
                <th>ID</th>
                <th>用户名</th>
                <th>昵称</th>
                <th>性别</th>
                <th>手机</th>
                <th>余额</th>
                <th>是否会员</th>
                <th>是否管理员</th>
                <th>账号状态</th>
                <th>账号创建时间</th>
                <th>上次修改时间</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody>
            <c:forEach items="${requestScope.pageUsers.getList()}" var="user">
                <tr>
                    <td>${user.userId}</td>
                    <td>${user.username}</td>
                    <td>${user.nickName}</td>
                    <td>${user.gender == 1 ? '男' : (user.gender == 2 ? '女' : '保密')}</td>
                    <td>${user.phone}</td>
                    <td>${user.balance}</td>
                    <td>${user.isMember == 1 ? '是' : '否'}</td>
                    <td>${user.isAdmin == 1 ? '是' : '否'}</td>
                    <td><c:if test="${user.userStatus == 1}">已激活</c:if> <c:if
                            test="${user.userStatus == 0}">未激活</c:if></td>
                    <td>${user.userCreateTimeStr}</td>
                    <td>${user.userUpdateTimeStr}</td>
                    <td width="100px">
                        <button type="button" class="btn btn-primary btn-xs" onclick="getUser(${user.userId})"
                                data-toggle="modal" data-target="#updataUser">编辑
                        </button>
                        <button type="button" class="btn btn-danger btn-xs"
                                onclick="deleteUserById(this, ${user.userId})">删除
                        </button>
                    </td>
                </tr>
            </c:forEach>
            <tr>
                <td colspan="10" id="tr_foot">
                    <span>总共 ${requestScope.pageUsers.getTotal()} 条</span>
                    <span>总共 ${requestScope.pageUsers.getPages()} 页</span>
                    <span>当前第 ${requestScope.pageUsers.getPageNum()} 页</span>
                    <span><a href="/user/findUserByConditionWithPage?condition=${requestScope.condition}&pageSize=${requestScope.pageUsers.getPageSize()}">首页</a></span>
                    <span><a href="/user/findUserByConditionWithPage?condition=${requestScope.condition}&pageNum=${requestScope.pageUsers.getPageNum()-1}&pageSize=${requestScope.pageUsers.getPageSize()}">上一页</a></span>
                    <c:forEach begin="1" end="${requestScope.pageUsers.getPages()}" var="page">
                        <span> <a href="/user/findUserByConditionWithPage?condition=${requestScope.condition}&pageNum=${page}&pageSize=${requestScope.pageUsers.getPageSize()}">${page}</a> </span>
                    </c:forEach>
                    <span><a href="/user/findUserByConditionWithPage?condition=${requestScope.condition}&pageNum=${requestScope.pageUsers.getPageNum()+1}&pageSize=${requestScope.pageUsers.getPageSize()}">下一页</a></span>
                    <span><a href="/user/findUserByConditionWithPage?condition=${requestScope.condition}&pageNum=${requestScope.pageUsers.getPages()}&pageSize=${requestScope.pageUsers.getPageSize()}">尾页</a></span>
                    &nbsp;&nbsp;&nbsp;
                    <span>
                        每页
                        <select name="pageSize" id="pageSizeSelect" onchange="changePageSize($('#pageSizeSelect option:selected').val())">
                            <option value="3"  <c:if test="${requestScope.pageUsers.getPageSize() == 3}">selected</c:if> > 3 </option>
                            <option value="5"  <c:if test="${requestScope.pageUsers.getPageSize() == 5}">selected</c:if> > 5 </option>
                            <option value="10"  <c:if test="${requestScope.pageUsers.getPageSize() == 10}">selected</c:if> > 10 </option>
                        </select>
                        条
                    </span>
                </td>
            </tr>
            </tbody>
        </table>

        <!-- 增加 Modal -->
        <div class="modal fade" id="addUser" tabindex="-1" role="dialog" aria-labelledby="myAddModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myAddModalLabel">新增用户</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="addForm">
                            <div class="form-group">
                                <label for="inputUsername" class="col-sm-2 control-label">用户名</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="username" id="inputUsername"
                                           placeholder="用户名">
                                </div>
                                <div class="col-sm-2">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-4">
                                    <label class="radio-inline">
                                        <input type="radio" name="gender" value="0" checked> 保密
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="gender" value="1"> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="gender" value="2"> 女
                                    </label>
                                </div>
                                <div class="col-sm-6">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPhone" class="col-sm-2 control-label">手机</label>
                                <div class="col-sm-8">
                                    <input type="text" name="phone" class="form-control" id="inputPhone"
                                           placeholder="手机">
                                </div>
                                <div class="col-sm-2">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputBalance" class="col-sm-2 control-label">余额</label>
                                <div class="col-sm-8">
                                    <input type="text" name="balance" class="form-control" id="inputBalance"
                                           placeholder="余额" value="0.0">
                                </div>
                                <div class="col-sm-2">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">会员</label>
                                <div class="col-sm-4">
                                    <label class="radio-inline">
                                        <input type="radio" name="isMember" value="1" checked> 是
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="isMember" value="0"> 否
                                    </label>
                                </div>
                                <div class="col-sm-6">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">管理员</label>
                                <div class="col-sm-4">
                                    <label class="radio-inline">
                                        <input type="radio" name="isAdmin" value="1" checked> 是
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="isAdmin" value="0"> 否
                                    </label>
                                </div>
                                <div class="col-sm-6">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">是否激活</label>
                                <div class="col-sm-4">
                                    <label class="radio-inline">
                                        <input type="radio" name="userStatus" value="1" checked> 是
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" name="userStatus" value="0"> 否
                                    </label>
                                </div>
                                <div class="col-sm-6">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="addUserBtn">保存</button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 修改 Modal -->
        <div class="modal fade" id="updataUser" tabindex="-1" role="dialog" aria-labelledby="myUpdateModalLabel">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                                aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title" id="myUpdateModalLabel">新增用户</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal" id="updateForm">
                            <input type="hidden" id="userId" name="userId"/>
                            <div class="form-group">
                                <label for="inputUsernameUpdate" class="col-sm-2 control-label">用户名</label>
                                <div class="col-sm-8">
                                    <input type="text" class="form-control" name="username" id="inputUsernameUpdate"
                                           placeholder="用户名">
                                </div>
                                <div class="col-sm-2">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">性别</label>
                                <div class="col-sm-4">
                                    <label class="radio-inline">
                                        <input type="radio" id="gender0" name="gender" value="0" checked> 保密
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" id="gender1" name="gender" value="1"> 男
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" id="gender2" name="gender" value="2"> 女
                                    </label>
                                </div>
                                <div class="col-sm-6">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputPhoneUpdate" class="col-sm-2 control-label">手机</label>
                                <div class="col-sm-8">
                                    <input type="text" name="phone" class="form-control" id="inputPhoneUpdate"
                                           placeholder="手机">
                                </div>
                                <div class="col-sm-2">
                                </div>
                            </div>
                            <div class="form-group">
                                <label for="inputBalanceUpdate" class="col-sm-2 control-label">余额</label>
                                <div class="col-sm-8">
                                    <input type="text" name="balance" class="form-control" id="inputBalanceUpdate"
                                           placeholder="余额" value="0.0">
                                </div>
                                <div class="col-sm-2">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">会员</label>
                                <div class="col-sm-4">
                                    <label class="radio-inline">
                                        <input type="radio" id="isMember1" name="isMember" value="1" checked> 是
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" id="isMember0" name="isMember" value="0"> 否
                                    </label>
                                </div>
                                <div class="col-sm-6">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">管理员</label>
                                <div class="col-sm-4">
                                    <label class="radio-inline">
                                        <input type="radio" id="isAdmin1" name="isAdmin" value="1" checked> 是
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" id="isAdmin0" name="isAdmin" value="0"> 否
                                    </label>
                                </div>
                                <div class="col-sm-6">
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-sm-2 control-label">是否激活</label>
                                <div class="col-sm-4">
                                    <label class="radio-inline">
                                        <input type="radio" id="userStatus1" name="userStatus" value="1" checked> 是
                                    </label>
                                    <label class="radio-inline">
                                        <input type="radio" id="userStatus0" name="userStatus" value="0"> 否
                                    </label>
                                </div>
                                <div class="col-sm-6">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" id="updateUserBtn">保存</button>
                    </div>
                </div>
            </div>
        </div>

    </c:if>
</div>


<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
<script src="${pageContext.request.contextPath}/static/js/jquery-3.4.1.min.js"></script>
<!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
<script src="${pageContext.request.contextPath}/static/js/bootstrap.min.js"></script>
</body>

<script>
    function deleteUserById(obj, userId) {
        $.ajax({
            url: "/user/deleteUserById/" + userId,
            type: "put",
            dataType: "json",
            success: function (result) {
                $(obj).parent().parent().remove();
                alert(result.message)
            },
        })
    }

    function getUser(userId) {
        $.get('/user/findUserById/' + userId, null, function (result) {
            if (result.success) {
                $("#userId").val(result.data.userId);
                $("#inputUsernameUpdate").val(result.data.username);
                if (result.data.isAdmin == 1) {
                    $("#isAdmin1").prop("checked", true);
                    $("#isAdmin0").prop("checked", false);
                } else {
                    $("#isAdmin1").prop("checked", false);
                    $("#isAdmin0").prop("checked", true);
                }
                $("#inputPhoneUpdate").val(result.data.phone);
                if (result.data.gender == 0) {
                    $("#gender0").prop("checked", true);
                    $("#gender1").prop("checked", false);
                    $("#gender2").prop("checked", false);
                } else if (result.data.gender == 1) {
                    $("#gender0").prop("checked", false);
                    $("#gender1").prop("checked", true);
                    $("#gender2").prop("checked", false);
                } else {
                    $("#gender0").prop("checked", false);
                    $("#gender1").prop("checked", false);
                    $("#gender2").prop("checked", true);
                }
                if (result.data.userStatus == 1) {
                    $("#userStatus1").prop("checked", true);
                    $("#userStatus0").prop("checked", false);
                } else {
                    $("#userStatus0").prop("checked", true);
                    $("#userStatus1").prop("checked", false);
                }
                if (result.data.isMember == 1) {
                    $("#isMember1").prop("checked", true);
                    $("#isMember0").prop("checked", false);
                } else {
                    $("#isMember1").prop("checked", false);
                    $("#isMember0").prop("checked", true);
                }
                $("#inputBalanceUpdate").val(result.data.balance);
            }
        }, 'json')
    }

    //改变pageSize
    function changePageSize(pageSize){
        console.log(pageSize);
        location.href = '/user/findUserByConditionWithPage?condition=${requestScope.condition}&pageNum=${requestScope.pageUsers.getPageNum()}&pageSize=' + pageSize;
    }

    $(function () {
        //新增按钮绑定事件
        $("#addUserBtn").click(function () {
            var $this = $(this);
            var params = $("#addForm").serialize();
            $.post('/user/saveUser', params, function (result) {
                if (result.success) {
                    //关闭这个框
                    $this.attr('data-dismiss', 'modal');
                    //刷新数据
                    location.href = '/user/findUserByConditionWithPage?condition=${requestScope.condition}&pageNum=${requestScope.pageUsers.getPageNum()}&pageSize=${requestScope.pageUsers.getPageSize()}';
                }
            }, 'json');
        });

        //修改按钮绑定事件
        $("#updateUserBtn").click(function () {
            var $this = $(this);
            var params = $("#updateForm").serialize();
            console.log(params);
            /*$.ajax({
                url : '/user/updateUser',
                type : 'put',
                data : params,  //此处还等用json传数据
                dataType : 'json',
                success : function (result) {
                    if (result.success){
                        $this.attr('data-dismiss','modal');
                        location.href = '/user/findAll';
                    } else {
                        alert(result.message);
                    }
                }
            })*/

            $.post('/user/updateUser', params, function (result) {
                if (result.success) {
                    //关闭这个框
                    $this.attr('data-dismiss', 'modal');
                    //刷新数据
                    location.href = '/user/findUserByConditionWithPage?condition=${requestScope.condition}&pageNum=${requestScope.pageUsers.getPageNum()}&pageSize=${requestScope.pageUsers.getPageSize()}';
                } else {
                    alert(result.message);
                }
            }, 'json');
        });

/*        //显示所有按钮绑定事件
        $("#findAll").click(function () {
            $.get('/user/findAll', null, function (result) {
                console.log(${requestScope.pageUsers.getPages()});
                window.location.href=''
            }, 'json')
        })*/

    })

</script>

</html>
